<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>Untitled Document</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" href="css/screen.css"/>
	<script src="js/jquery-1.10.2.min.js"></script>
	<!--<script src="js/jquery.mobile-1.4.0.min.js"></script>-->
	<script src="js/custom.js"></script>
    <!--<script src="js/jquery.touch.min.js"></script>-->
</head>
<style>

</style>

<body>
<div class="overflowWrap" style="overflow-x: hidden;">
    <div id="header">
        <div class="nav">
            <a href="#" class="mainMenuLink"><img src="images/menu-link-bg.png" alt="" /></a>
            <div class="topLinks">
                <ul>
                    <li class="active"><a href="#" target_page="1">Near By</a></li>
                    <li><a href="#" target_page="2">My Spot</a></li>
                    <li><a href="#" target_page="3">Starbucks 222</a></li>
                    <li><a href="#" target_page="4">Nike 222</a></li>
                </ul>
            </div>
            <div class="cb"></div>
        </div><!--nav-->
    </div><!-- End of header-->
    
    <div class="sideMenu">
        <div class="search">
            <form>
                <input type="text" name="search" placeholder="e.g tam abdel" />
                <input type="submit" value="" name="submit" />
                <div class="cb"></div>
            </form>
        </div><!--End of search-->
        <div class="searchBottom">
            <div class="profilePic">
                <img class="ribbon" src="images/ribbon.png" alt="" />
                <div class="profImgBox">
                    <img src="images/profile-pic.png" alt="" />
                </div>
            </div><!--End of profilePic-->
            <div class="profileDetail">
                <h2 class="title">John Rechard</h2>
                <div class="postion">
                    <span class="heading">Postion</span><span class="value">24th</span>
                </div>
                <div class="postion">
                    <span class="heading">Points</span><span class="value value2">24,254</span>
                </div>
                <h3 class="level">newcomer</h3>
            </div>
            <div class="cb"></div>
            <div class="menu">
                <ul>
                    <li class="home"><a href="#"><span class="icon"><img src="images/icon-home.png" alt="" /></span>home</a></li>
                    <li class="reward"><a href="#"><span class="icon"><img src="images/icon-reward.png" alt="" /></span>reward</a></li>
                    <li class="me"><a href="#"><span class="icon"><img src="images/icon-me.png" alt="" /></span>me</a></li>
                    <li class="help"><a href="#"><span class="icon"><img src="images/icon-help.png" alt="" /></span>help</a></li>
                    <li class="signout"><a href="#"><span class="icon"><img src="images/icon-signout.png" alt="" /></span>sign out</a></li>
                </ul>
            </div>
        </div><!--End of searchBottom-->
    </div><!--End of sideMenu-->
    
    <div class="content">
        <!--------------------------------Page1 - home page ----------------------------------->
        <div id="home" class="page page1 active" page="1">
            <ul>
                <li>
                    <div class="placeBox place1">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks Coffee</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place2">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Tom’s Restaurant</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place3">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks Coffee</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
            </ul>
        </div><!-- End of #home.page1-->
        
        <!--------------------------------Page2 - mySpot page ----------------------------------->
        <div id="mySpot" class="page page2" page="2">
            <ul>
                <li>
                    <div class="placeBox place1">
                        <div class="placeImg" style="background:url(images/shoe.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Nike Fly Sports Shop</h2>
                                <span class="firstTxt">Austin , Tx</span>
                                <span class="secondTxt">Join and fly with nike</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place2">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Tom’s Restaurant</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place3">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks Coffee</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
            </ul>
        </div><!-- End of #mySpot.page2-->
        <!--------------------------------Page3 - home page ----------------------------------->
        <div id="home22" class="page page3" page="3">
            <ul>
                <li>
                    <div class="placeBox place1">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks 22222</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place2">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Tom’s Restaurant</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place3">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks Coffee</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
            </ul>
        </div><!-- End of #home.page3-->
        
        <!--------------------------------Page4 - mySpot page ----------------------------------->
        <div id="mySpot22" class="page page4" page="4">
            <ul>
                <li>
                    <div class="placeBox place1">
                        <div class="placeImg" style="background:url(images/shoe.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Nike Fly 2222222</h2>
                                <span class="firstTxt">Austin , Tx</span>
                                <span class="secondTxt">Join and fly with nike</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place2">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Tom’s Restaurant</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
                <li>
                    <div class="placeBox place3">
                        <div class="placeImg" style="background:url(images/place1.jpg) no-repeat; background-size: 100% 100%;"></div>
                        <img class="blackCover" src="images/black-top-cover.png" alt="" />
                        <div class="placeContent">
                            <div class="colLeft">
                                <h2>Starbucks Coffee</h2>
                                <span class="firstTxt">Brooklyn, NY</span>
                                <span class="secondTxt">Join and Receive a free soft drink</span>
                            </div>
                            <a class="moreBtn" href="#">more<span>+</span></a>
                            <div class="cb"></div>
                        </div>
                    </div>
                </li><!-- End of placeBox li-->
            </ul>
        </div><!-- End of #mySpot.page4-->
        
        <div class="cb"></div>
    </div><!-- End of content-->
</div><!-- End of overflowWrap-->
   <!-- <script type="text/javascript">
        var foo = $('body');
        foo.enableTouch({useMouse: true}).on('swipeUp', function(){
            alert('swipe up');}
        )
        .on('swipeDown',function(){
            alert('swipe down');}
        );
    </script>-->
</body>
</html>
